<template>
  <section>
    <div class="itemContainer" v-for="(item, idx) in alarmdata" :key="idx">
      <div :style="{ backgroundColor: alarmIconMap[item?.level] }" class="icon">
        <img class="img" :src="img" alt="告警" />
      </div>
      <div>
        <div>
          {{
            `${item?.evtName || '--'}！ 型号: ${item?.modelType || '--'}, 国别: ${item?.country || '--'}, 类型:
                  ${item?.category || '--'}`
          }}
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { storeToRefs } from 'pinia'
  import { mapData } from '@/store/modules/mapData'

  const img = new URL('../../../../assets/images/layout/warning.svg', import.meta.url).href

  const alarmIconMap = {
    blue: '#48A8E2',
    yellow: '#FFAC00',
    red: '#FF0000'
  }

  const props = defineProps<{ recentModel: string }>()

  const $mapData = mapData()
  const { planeInfo } = storeToRefs($mapData)

  const event_alarm_Data = ref<Record<string, any>[]>([])

  const demoArr: any = []
  Object.keys(planeInfo.value).forEach((key) => {
    ;(planeInfo.value[key].evtName || planeInfo.value[key].level) && demoArr.push(planeInfo.value[key])
  })

  const printArrayItem = (record: Record<string, any>) /* 生成异步函数数组 */ => {
    return new Promise((resolve) => {
      setTimeout(() => {
        event_alarm_Data.value.push(record)

        resolve(true)
      }, record?.time * 1000 || Math.random() * 10000)
    })
  }

  const timerArr = demoArr.map((item) => {
    return printArrayItem(item)
  })

  const alarmdata = computed(() => {
    return event_alarm_Data.value.filter((item, index) => {
      return props.recentModel !== 'area' ? true : index === 2
    })
  })

  Promise.all(timerArr)
</script>

<style lang="less" scoped>
  section {
    width: 400px;
    height: 180px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(209, 234, 255, 0.8), #ffffff);
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 10px 0 0 10px;
  }

  .icon {
    width: 36px;
    height: 18px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
  }

  .img {
    width: 14px;
    height: 14px;
  }

  .itemContainer {
    display: flex;
    column-gap: 14px;
    margin-bottom: 4px;
    color: #000;
  }

  .infoContainer {
    display: flex;
    column-gap: 8px;
  }
</style>
